<template>
  <van-tabbar v-model="active" active-color="#39be77">
    <van-tabbar-item name="/home" icon="notes-o" @click="link('/home')">明细</van-tabbar-item>
    <van-tabbar-item name="/data" icon="bar-chart-o" @click="link('/data')">统计</van-tabbar-item>
    <van-tabbar-item name="/user" icon="user-o" @click="link('/user')">我的</van-tabbar-item>
  </van-tabbar>

</template>

<script>
import { useRouter } from 'vue-router'
import { ref} from 'vue'
export default {

setup() {
    const router = useRouter()
    const active = ref('/home')

    const link = (path) => {
        router.push({ path })
    }

    router.afterEach(() => {
        active.value = router.currentRoute.value.path
    })
    return { link,active }
}
}
</script>

<style>
/* @import url('../config/custom.less');

.van-tabbar-item-active {
    color: @primary;
} */
</style>